// 公共的弹窗组件 在antd弹窗组件的基础下 新增弹窗全屏打开功能 设置标题等更加灵活

<template>
    <a-modal ref="modal" v-bind="_attrs" @ok="handleOk" @cancel="handleCancel" destroyOnClose>
        <!-- 1, 保留一个插槽 使组件更加灵活 使用更加灵活 -->
        <slot></slot>
        <!-- 2.保证组件的灵活性 根据传入的参数决定是否设置有标题 -->
        <!-- 设置标题 -->
        <template v-if="!isNoTitle" slot="title">
            <a-row class="j-modal-title-row" type="flex">
                <a-col class="left">
                    <slot name="title">{{title}}</slot>
                </a-col>
                <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
                    <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"></a-button>
                </a-col>
            </a-row>
        </template>
        <!-- 不设置标题 -->
        <template v-else slot="title">
            <a-row class="j-modal-title-row" type="flex">
                <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
                    <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" icon="fullscreenButtonIcon"/>
                </a-col>
            </a-row>
        </template>
    </a-modal>
</template>
<script>
import { triggerWindowResizeEvent } from '@/utils/util'
export default {
    name: 'JModal',
     data() {
         return {
               // 控制全屏的参数 是否打开全屏
              innerFullscreen: this.fullscreen
         }
    },
    props: {
        // 标题
        title: String,
        // 是否全屏弹窗  true为全屏 false为非全屏 就是弹窗的时候 
        // 弹出窗是否就是全屏的 一般默认为false 全屏弹窗有点丑 除非是特殊情况
        fullscreen: {
            type: Boolean,
            default: false
        },
        // 是否允许切换全屏 (就是右上角有一个全屏的按钮) 是否出现这个切换全屏的按钮
        switchFullscreen: {
            type: Boolean,
            default: false
        },
        // 点击确定按钮的时候是否关闭弹窗
        onClose: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        // v-bind 要绑定的属性绑定到a-modal上 中间组件传递父组件传递的值
        _attrs() {  
            let attrs = {...this.$attrs};
            // 全屏 --- 设置弹窗为全屏显示
            if(this.innerFullscreen) {
                attrs['width'] = '100%';
            }
            return attrs;
        },
        // isNoTitle 计算属性标题是否显示
        isNoTitle() {
            return !this.title;
        },
        // 切换全屏的按钮图标
        fullscreenButtonIcon() {
            return this.innerFullscreen ? 'fullscreen-exit':'fullscreen'
        }
    },
   
    methods: {
      // 切换全屏
      toggleFullscreen() {
          this.innerFullscreen = !this.innerFullscreen;
          triggerWindowResizeEvent();
      }
    }

}
</script>